<template>
	<view class="box">
		<!-- 导航 -->
		<view slot="top">
			<u-navbar :autoBack="true" title="拼团商品详情" :placeholder="true" titleStyle="color:#333"
				bgColor="#ffffff"></u-navbar>
		</view>
		<!-- 轮播图 -->
		<view class="swiper" v-if="goodsInfo.groupbuy_image">
			<swiper class="swiper_box" circular :current="current" :indicator-dots="true" :autoplay="true"
				:interval="2000" :duration="500" @change="getIndex">
				<swiper-item v-for="(i,index) in goodsInfo.groupbuy_image" :key="index">
					<image :src="i" mode="widthFix" @click="onPreview(goodsInfo.groupbuy_image,index)"></image>
				</swiper-item>
			</swiper>
			<view class="num">{{index}}/{{goodsInfo.groupbuy_image.length}}</view>
		</view>
		<!-- 商品详情 -->
		<view class="goods_info">
			<view class="goods_name">
				<span>{{goodsInfo.goods_name}}
				</span>
			</view>
			<view class="goods_price">
				<span class="ct">拼团价</span>￥{{goodsInfo.groupbuy_price}}
			</view>
			<view class="num">
				{{goodsInfo.buy_min_number}}人成团
			</view>
		</view>
		<!-- 多少人正在拼团 -->
		<view class="ingBox" v-if="ptList.length>0">
			<view class="title">
				<view class="left">
					{{ptList.length}}人正在拼团,可直接参与
				</view>
				<view class="right" @click="goMore">
					<span>查看更多</span><span class="icon"></span>
				</view>
			</view>
			<view class="item" v-for="item in ptList.slice(0,1)" :key="item.sgo_id">
				<view class="avatar">
					<view class="pic">
						<image :src="item.avatar" style="width: 60rpx; height: 60rpx;" mode="widthFix"></image>
					</view>
					<view class="name">
						{{item.nickname}}
					</view>
				</view>
				<view class="cz">
					<view class="left">
						<view class="peopleNum">
							还差<span style="color: #fc562f;">{{item.total-1 -item.join.length}}</span>人拼成
						</view>
						<view class="times">
							还剩<u-count-down :timestamp="timestampToTime(item.sgo_timeout)"></u-count-down>
						</view>
					</view>
					<view class="right" @click="joinPt(item)">
						参与拼团
					</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="goods_detail_info">
			<view class="title">
				商品详情
			</view>
			<view class="fwb">
				<u-parse :html="goodsInfo.groupbuy_intro"></u-parse>
			</view>
		</view>
		<!-- 购买 -->
		<view class="bottomView">
			<view class="left">
				<u-button class="bottomTitle" :customStyle="btnGetCode" :hair-line="false" size="medium"
					open-type="contact">
					<view class="kfIcon">
						<image class="bottomIcon" src="/static/kf.png"></image>
					</view>
					<view class="kf">
						客服
					</view>
				</u-button>
			</view>
			<view class="right" @click="onGoodsBuy">
				<view class="buyView">
					<view class="price">
						￥{{goodsInfo.groupbuy_price}}
					</view>
					<view class="btn">
						发起拼团
					</view>
				</view>
			</view>
		</view>
		<view class="hhh">

		</view>
		<u-popup v-model="shows" mode="center" :closeable="true" border-radius="20">
			<view class="ptBox" v-if="selectPeople">
				<view class="title">
					{{selectPeople.nickname}}
				</view>
				<view class="num">
					仅剩<span
						style="color: #fc562f;">{{selectPeople.total-1- selectPeople.join.length}}</span>个名额，<u-count-down
						:timestamp="timestampToTime(selectPeople.sgo_timeout)"></u-count-down>后结束
				</view>
				<view class="avatarPic">
					<view class="mastePeople">
						<image :src="selectPeople.avatar" style="width: 64rpx; height: 64rpx;border-radius: 50%; ">
						</image>
						<span class="name">拼主</span>
					</view>
					<view class="jionPeople" v-for="(item,index) in selectPeople.join" :key="index">
						<image :src="item.avatar" mode="widthFix" style="width: 64rpx;"></image>
					</view>
					<view class="joinPeople"
						v-for="(c,index) in people.slice(0,selectPeople.total-1- selectPeople.join.length)"
						:key="index">

					</view>
				</view>
				<view class="btn" @click="onGoodsJoin(2)">
					参与拼团
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getGroupDetail,
		getGroupbuyCreate
	} from '@/api/product.js'
	export default {
		data() {
			return {
				index: 1,
				current: 0,
				//选择规格的弹窗
				// show: false,
				selectSize: ["规格1", "规格2", "规格3"],
				//选择规格的内容
				selectValue: "",
				count: 1,
				//规格下标
				indexs: 0,
				// 商品详情
				goodsInfo: {
					id: "1",
					name: "产品名称产品名称",
					type: "规格1",
					price: "3000",
					count: 1
				},
				btnGetCode: {
					width: "100%",
					border: 'none',
					display: 'flex',
					flexDirection: 'column',
					alignItems: 'center',
					justifyContent: 'center'
				},

				//拼团
				shows: false,
				// 拼团 列表
				ptList: [],
				selectPeople: "",
				people: [1, 2, 3, 4, 5],
				goodsId: ""
				// //分享
				// showShare: false,
				// showPtorder: false
			};
		},
		//获取商品id
		onLoad(res) {
			console.log("hhh", res.id);
			this.ptDetaid(res.id)
		},
		methods: {
			//更换轮播图下标
			getIndex(index) {
				this.index = index.target.current + 1
			},
			onPreview(list, index) {
				console.log(list);
				uni.previewImage({
					current: index,
					urls: list
				});
			},
			//添加数量
			valChange(index) {
				console.log(index);
			},
			//选择规格
			select(i) {
				this.indexs = i
				this.goodsInfo.type = this.selectSize[i]
			},

			goMore() {
				let data = [this.goodsInfo]
				data = JSON.stringify(data)
				uni.navigateTo({
					url: `/page/group-more/group-more?id=${this.goodsId}&data=${data}`
				})
			},
			ptDetaid(id) {
				getGroupDetail(id).then((res) => {
					console.log("拼团商品详情", res);
					this.goodsInfo = res.data
					this.goodsId = res.data.goods_id
					getGroupbuyCreate(this.goodsInfo.goods_id).then(res => {
						console.log("发起人拼团列表", res);
						this.ptList = []
						if (res.data) {
							res.data.forEach(item => {
								if (item.total - item.join.length > 1) {
									this.ptList.push(item)
								}
							})
						}

						console.log(this.ptList);
					})
				})

			},
			onGoodsBuy() {
				console.log("去购买");
				if (uni.getStorageSync('access_token') != '') {
					let data = [this.goodsInfo]

					uni.redirectTo({
						url: '/page/PtorderConfirm/PtorderConfirm?goods=' + JSON.stringify(data)
					});
				} else {
					uni.navigateTo({
						url: '/pages/wx-login/wx-login'
					});
				}
				this.show = false
			},
			onGoodsJoin(type) {
				console.log("去参与", type);
				if (uni.getStorageSync('access_token') != '') {
					let obj = this.goodsInfo
					obj.sgo_id = this.selectPeople.sgo_id
					let data = [obj]
					uni.navigateTo({
						url: '/page/PtorderConfirm/PtorderConfirm?type=2&goods=' + JSON.stringify(data)
					});
				} else {
					uni.navigateTo({
						url: '/pages/wx-login/wx-login'
					});
				}
				this.show = false
			},
			// 参与拼团
			joinPt(item) {
				let id = uni.getStorageSync("userId") || ""
				if (id == item.sgo_userid) {
					uni.showToast({
						title: "不能参与自己发起的拼团",
						icon: "none"
					})
					return
				}
				console.log("参与拼团", item);
				this.shows = true
				this.selectPeople = item
			},
			// 时间戳：1637244864707
			/* 时间戳转换为时间 */
			timestampToTime(timestamp) {
				timestamp = timestamp ? timestamp : null;
				var timestamp1 = new Date().getTime()
				var timestamp2 = timestamp * 1000 - timestamp1
				if (timestamp2 < 0) {
					return "已过期"
				}
				return timestamp2;
			}


		},
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #f5f5f5;
		box-sizing: border-box;
		width: 750rpx;
		min-height: 100vh;
		padding: 1rpx;
	}

	.hhh {
		height: 100rpx;
		margin: 10rpx 0;
	}

	.swiper {
		position: relative;
		width: 750rpx;
		height: 750rpx;

		.swiper_box {
			width: 750rpx;
			height: 750rpx;

			image {
				width: 750rpx;
				height: 750rpx;
			}
		}

		.num {
			position: absolute;
			text-align: center;
			bottom: 40rpx;
			right: 40rpx;
			width: 80rpx;
			height: 32rpx;
			line-height: 32rpx;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 16rpx;
			font-size: 20rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #FFFFFF;

		}
	}

	//商品详情
	.goods_info {
		width: 750rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		padding: 20rpx;
		font-family: Source Han Sans CN;

		.goods_price {
			font-size: 28rpx;
			font-weight: 500;
			color: #FA453C;
			margin-bottom: 10rpx;

			.ct {
				display: inline-block;
				width: 80rpx;
				height: 36rpx;
				text-align: center;
				background: #F5E7E6;
				border-radius: 10rpx;
				font-size: 20rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FA453C;
				line-height: 36rpx;
			}
		}

		.goods_name {
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
			font-size: 30rpx;
			margin: 10rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.icon {
				width: 36rpx;
				height: 36rpx;
				background-image: url('/static/fx.png');
				background-size: cover;
				background-repeat: no-repeat;

			}
		}

		.num {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			line-height: 48rpx;
		}

		.goods_sale_num {
			font-weight: 400;
			color: #999999;
			font-size: 28rpx;
			margin: 10rpx 0;

			span {
				display: inline-block;
				margin-right: 18rpx;
			}

			text {
				margin-right: 24rpx;
			}
		}

		.cupons_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 0;

			.cupons .num {
				display: inline-block;
				width: 128rpx;
				height: 38rpx;
				text-align: center;
				line-height: 38rpx;
				margin-right: 18rpx;
				border: 1px solid #fc562f;
				border-radius: 19rpx;
				font-weight: 400;
				color: #fc562f;
				line-height: 38rpx;
				font-size: 22rpx;
			}

			.more_cupons {
				width: 149rpx;
				height: 22rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				font-weight: 400;
				line-height: 22rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;

				.icon {
					display: inline-block;
					width: 24rpx;
					height: 24rpx;
					background-image: url('/static/img/箭头.png');
					background-size: cover;
					background-repeat: no-repeat;
				}

			}
		}

	}

	//商品详情
	.goods_detail_info {
		text-align: center;
		width: 750rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.title {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			background-color: #fff;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}

		.fwb {
			width: 750rpx;
			box-sizing: border-box;
			padding: 20rpx;
		}
	}

	// 正在拼团
	.ingBox {
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-top: 20rpx;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 18rpx 0;
		}

		.title .right {
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;
		}

		.title .right .icon {
			display: inline-block;
			width: 24rpx;
			height: 24rpx;
			background-image: url('/static/arrow.png');
			background-size: cover;
			background-repeat: no-repeat;
		}

		.item {
			width: 710rpx;
			padding: 10rpx;
			box-sizing: border-box;
			height: 100rpx;
			background: #E7F5E6;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			.avatar {
				display: flex;
				align-items: center;
			}

			.avatar .name {
				margin-left: 18rpx;
			}

			.cz {
				display: flex;
				align-items: center;

				.left {
					font-size: 22rpx;
					line-height: 30rpx;
					margin-right: 28rpx;

				}

				.left .peopleNum {
					padding: 8rpx 0;
				}

				.left .times {
					padding: 8rpx 0;
				}

				.right {
					width: 140rpx;
					height: 50rpx;
					background: #fc562f;
					border-radius: 10rpx;
					font-size: 24rpx;
					text-align: center;
					line-height: 50rpx;
					color: #fff;
				}
			}
		}
	}

	// 购物车
	.bottomView {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		padding: 10rpx 0rpx;
		height: 96rpx;
		background-color: #fff;
		box-sizing: border-box;
		overflow: hidden;

		.left {
			margin-left: 20rpx;

			.bottomTitle .kfIcon {
				width: 26rpx;
				height: 26rpx;
			}

			.bottomTitle .bottomIcon {
				width: 36rpx;
				height: 36rpx;
			}

			.kf {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.right {

			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;

			.addCartView {
				width: 300rpx;
				height: 96rpx;
				background: #fc562f;
				text-align: center;
			}

			.buyView {
				width: 300rpx;
				height: 96rpx;
				background: #fc562f;
				text-align: center;
				color: #fff;
				box-sizing: border-box;
				padding: 10rpx 0;

				.price {
					font-size: 36rpx;
				}
			}
		}
	}

	//选择规格
	.popBox {
		font-family: Source Han Sans CN;
		margin-top: 30rpx;
		width: 750rpx;
		height: 720rpx;
		padding: 30rpx 20rpx;
		box-sizing: border-box;

		.buy_goods {
			display: flex;

		}

		.buy_goods .left {
			width: 150rpx;
			height: 150rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			overflow: hidden;

			image {
				width: 150rpx;
				height: 150rpx;
			}
		}

		.buy_goods .right {
			margin-left: 20rpx;

			.name {
				height: 48rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				line-height: 48rpx;
			}

			.price {
				height: 48rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FA453C;
				line-height: 48rpx;
			}

			.size {
				height: 48rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
				line-height: 48rpx;
			}

		}

		.size_select {
			margin-top: 60rpx;

			.size_title {
				height: 64rpx;
				margin-bottom: 40rpx;
				height: 28rpx;
				font-size: 30rpx;
				line-height: 64rpx;
				font-weight: 400;
				color: #333333;
			}

			.selectCt {
				display: inline-block;
				width: 120rpx;
				height: 60rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				margin-right: 18rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
			}

			.selectCt.active {
				background: #E7F5E6;
				color: #fc562f;
			}
		}

		.count {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 80rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
		}

		.btns {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #fff;

			.buy {
				width: 640rpx;
				height: 80rpx;
				background: #fc562f;
				border-radius: 40rpx;
			}
		}
	}

	//拼团
	.ptBox {
		width: 480rpx;
		height: 520rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		text-align: center;
		padding: 1rpx;

		.title {
			margin-top: 80rpx;
		}

		.num {
			font-size: 24rpx;
			text-align: center;
			margin: 20rpx 0;
		}

		.avatarPic {
			min-width: 200rpx;
			max-width: 320rpx;
			box-sizing: border-box;
			flex-wrap: wrap;
			align-items: center;
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			margin: 60rpx auto;

			.mastePeople {
				position: relative;
				width: 64rpx;
				height: 64rpx;
				margin-top: 20rpx;
				border-radius: 50%;
				background-color: #e6e6e6;

			}

			.mastePeople .name {
				width: 56rpx;
				height: 28rpx;
				background: #FFAA33;
				border-radius: 10rpx;
				position: absolute;
				bottom: -0rpx;
				left: calc(50% - 28rpx);
				font-size: 20rpx;
				font-weight: 400;
				text-align: center;
				color: #FFFFFF;
			}

			.joinPeople {
				border: 1px dashed gray;
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				overflow: hidden;
				background-image: url('/static/123.png');
				background-size: cover;
				background-repeat: no-repeat;
			}
		}

		.btn {
			width: 200rpx;
			height: 60rpx;
			background: #fc562f;
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			color: #fff;
			margin: 60rpx auto;
		}
	}

	.popShare {
		width: 750rpx;
		height: 420rpx;
		background: #F5F5F5;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;

		.title {
			width: 750rpx;
			height: 100rpx;
			background-color: #fff;
			text-align: center;
			line-height: 100rpx;
		}

		.selectCt {
			background-color: #fff;
			width: 750rpx;
			height: 200rpx;
			box-sizing: border-box;
			padding: 20rpx 80rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.frien text,
			.friens text {
				margin-top: 15rpx;
			}
		}

		.btn {
			width: 750rpx;
			background-color: #fff;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
		}
	}
</style>